<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			#banner {
				position: relative;
			}
			
			#banner,#banner li,#banner img {
				width: 790px;
				height: 340px;
			}
			
			#banner ul li {
				position: absolute;
				list-style: none;
				display: none;
			}
			
			#banner ol li {
				width: 15px;
				height: 15px;
				border-radius: 50%;
				float: left;
				margin-left: 10px;
				border: 1px solid #000;
				background: #fff;
				cursor: pointer;
			}
			
			#banner ol {
				position: absolute;
				bottom: 20px;
				left: 40%;
				z-index: 22;
				list-style: none;
			}
			
			#banner .tip {
				position: absolute;
				width: 30px;
				height: 100px;
				background: rgba(255, 255, 255, 0.5);
				font-size: 30px;
				color: #000;
				text-align: center;
				line-height: 100px;
				top: 36%;
				z-index: 10;
			}
			
			#prev {
				left: 0;
			}
			
			#next {
				right: 0;
			}
			
			#banner div:hover {
				background: rgba(112, 240, 255, 0.5);
				color: #fff;
				cursor: pointer;
			}
		</style>
		<script src="js/jquery-3.1.1.js"></script>
	</head>

	<body>
		<div id="banner">
			<ul>
				<li style="left:0;display: block"><img src="img/5.jpg" alt=""></li>
				<li><img src="img/4.jpg" alt=""></li>
				<li><img src="img/3.jpg" alt=""></li>
				<li><img src="img/2.jpg" alt=""></li>
				<li><img src="img/1.jpg" alt=""></li>
				<li><img src="img/2.jpg" alt=""></li>
			</ul>
			<ol>
				<li style="background: red"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
			<div id="prev" class="tip"><</div>
			<div id="next" class="tip">></div>
		</div>
		<script>
			$(function() {
				$("#banner").mouseover(function() {
					clearInterval(timer);
				});
				$("#banner").mouseout(function() {
					timer = setInterval(move, 2000);
				});
				var i = 0;
				timer = setInterval(move, 2000);

				function move() {
					i++;
					$("#banner ul li").eq(i).fadeIn(1000);
					$("#banner ul li").eq(i).siblings().fadeOut(1000);
					$("#banner ol li").css("background", "#fff");
					$("#banner ol li").eq(i).css("background", "red");
					if(i == 5) {
						i = 0;
						$("#banner ol li").eq(0).css("background", "red");
					}
				}
				$("#prev").click(function() {
					i--;
					if(i == -1) {
						i = 4;
					}
					$("#banner ul li").eq(i).siblings().fadeOut(1000);
					$("#banner ul li").css("display", "none");
					$("#banner ul li").eq(i).fadeIn(500);
					$("#banner ol li").css("background", "#fff");
					$("#banner ol li").eq(i).css("background", "red");
				});
				$("#next").click(function() {
					i++;
					if(i == 5) {
						i = 0;
					}
					$("#banner ul li").eq(i).siblings().fadeOut(1000);
					$("#banner ul li").css("display", "none");
					$("#banner ul li").eq(i).fadeIn(500);
					$("#banner ol li").css("background", "#fff");
					$("#banner ol li").eq(i).css("background", "red");
				});
				$("#banner ol li").click(function() {
					i = $(this).index();
					$("#banner ul li").css("display", "none");
					$("#banner ul li").eq(i).fadeIn(500);
					$("#banner ol li").css("background", "#fff");
					$("#banner ol li").eq(i).css("background", "red");
				})
			})
		</script>

	</body>

</html>